<template>
    <div class="fillcontain">
        <el-radio-group  v-model="tabPosition" @change="changeTab" style="margin-bottom: 20px;">
            <el-radio-button label="top">
                广告管理
            </el-radio-button>
            <el-radio-button  label="right">
                帮助中心
            </el-radio-button>
        </el-radio-group>
        
        <search-item @showDialog="showAddFundDialog" @searchList="getMoneyList" @onBatchDelMoney="onBatchDelMoney"></search-item>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                align='center'
                @select="selectTable"
                @select-all="selectAll"
                >
              <el-table-column
                type="index"
                align='center'
                width="50">
            </el-table-column>
            <!-- <el-table-column
                type="selection"
                align='center'
                width="60">
            </el-table-column> -->
              <el-table-column
                prop="title"
                label="广告名称"
                align='center'
                width="280">
            </el-table-column>
              <el-table-column
                prop="image_url"
                label="图片"
                align='center'
                >
                 <template slot-scope="scope">  
                     <img style="width:100px;" :src="'http://'+ scope.row.image_url" alt="">
                </template>
            </el-table-column>
            <el-table-column
                prop="link"
                label="跳转链接"
                align='center'
                >
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                align='center'
                sortable
                width="100">
                <template slot-scope="scope">
                    {{scope.row.status == 1? '正常': '停用'}}
                </template>
            </el-table-column>
           
            <el-table-column
                prop="operation"
                align='center'
                label="操作"
                width="160">
                <template slot-scope='scope'>
                    
                    <el-button 
                        icon='delete' 
                        size="mini"
                        type="warning"
                        @click='onEditMoney(scope.row,scope.$index)'
                    >
                    {{scope.row.status == 1? '停用': '启用'}}
                    </el-button>
                    <el-button 
                        icon='delete' 
                        size="mini"
                        type="danger"
                        @click='onDeleteMoney(scope.row,scope.$index)'
                    >删除</el-button>
					
                </template>
            </el-table-column>
            </el-table>
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
            <addFundDialog  
				v-if="addFundDialog.show"
				 :isShow="addFundDialog.show" 
				 :dialogRow="addFundDialog.dialogRow"  
				 @getFundList="getMoneyList"  
				 @closeDialog="hideAddFundDialog">
			</addFundDialog>
			<winningRecord
				v-if="winningRecord.show"
				 :isShow="winningRecord.show" 
				 :dialogRow="winningRecord.dialogRow"  
				 @getFundList="winningRecord"  
				 @closeDialog="hideWinningRecord">
			</winningRecord>
			<prizeSetting
				v-if="prizeSetting.show"
				 :isShow="prizeSetting.show" 
				 :dialogRow="prizeSetting.dialogRow"  
				 @getFundList="prizeSetting"  
				 @closeDialog="hidePrizeSetting">
			</prizeSetting>
			
		</div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import * as mutils from '@/utils/mUtils'
    import SearchItem from "./components/searchItem";
    import AddFundDialog from "./components/addFundDialog";
	import PrizeSetting from "./components/prizeSetting";
	import WinningRecord from "./components/winningRecord";
    import Pagination from "@/components/pagination";
    import { adList , adDelete, adUpdate } from "@/api/finance";

    export default {
        data(){
            return {
                tableData: [],
                tabPosition: 'top',
                tableHeight:0,
                loading:true,
                idFlag:false,
                isShow:false, // 是否显示资金modal,默认为false
                editid:'',
                rowIds:[],
                sortnum:0,
                
                addFundDialog:{  
                    show:false,
                    dialogRow:{}
                },
				prizeSetting:{
				    show:false,
				    dialogRow:{}
				},
				winningRecord:{
				    show:false,
				    dialogRow:{}
				},
                incomePayData:{
                    page:1,
                    limit:20,
                    name:''
                },
                pageTotal:0,
                // 用于列表筛选
            }
        },
        components:{
            SearchItem,
            AddFundDialog,
            Pagination,
			WinningRecord,
			PrizeSetting
        },
        computed:{
            ...mapGetters(['search'])
        },
      	mounted() {
            this.getMoneyList();
	   },
	   methods:{
           changeTab() {
               this.$router.push('/markteingManage/help')
           },
			hidePrizeSetting(row) {
				 this.prizeSetting.show = false;
			},
			hideWinningRecord(row) {
				 this.winningRecord.show = false;
			},
			showPrizeSetting(row) {
				 this.prizeSetting.show = true;
			},
			showWinningRecord(row) {
				 this.winningRecord.show = true;
			},
            setAddress(value){

            },
            setTableHeight(){
                this.$nextTick(() => {
                   this.tableHeight =  document.body.clientHeight - 300
                })
            },
            // 获取资金列表数据
            getMoneyList(){
                const para = Object.assign({},this.incomePayData,this.search);
                adList(para).then(res => {
                     this.loading = false;
                     this.pageTotal = res.data.total
                     this.tableData = res.data.list
                })
            },
            // 显示资金弹框
            showAddFundDialog(val){
                this.$store.commit('SET_DIALOG_TITLE', val)
                this.addFundDialog.show = true;
            },
            hideAddFundDialog(){
                this.addFundDialog.show = false;
            },
            // 上下分页
            handleCurrentChange(val){
                this.incomePayData.page = val;
                this.getMoneyList()
            },
            // 每页显示多少条
            handleSizeChange(val){
                this.incomePayData.limit = val;
                this.getMoneyList()
            },
            getPay(val){
               if(mutils.isInteger(val)){
                   return -val;
               }else{
                   return val;
               }
            },
            /**
            * 格式化状态
            */
            formatterType(item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[type];
            },
            filterType(value, item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[value] == this.format_type_list[type];
            },
            // 编辑操作方法
            onEditMoney(row){
                this.addFundDialog.dialogRow = {...row};
                // this.showAddFundDialog();
                let text = row.status == 1? '停用': '启用';
                let param = {advertisingId: row.id, status: row.status == 1? 2: 1}
                this.$confirm(`确认${text}该广告吗?`, '提示', {
                    type: 'warning'
                })
                .then(() => {
                    adUpdate(param).then(res => {
                        this.$message({
                            message:  `${text}成功`,
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
            // 删除数据
            onDeleteMoney(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    const para = { advertisingId: row.id }
                    adDelete(para).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
            onBatchDelMoney(){
                this.$confirm('确认批量删除记录吗?', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    const ids = this.rowIds.map(item => item.id).toString()
                    const para = { ids: ids }
                    batchremoveMoney(para).then(res => {
                        this.$message({
                            message: '批量删除成功',
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
            // 当用户手动勾选数据行的 Checkbox 时触发的事件
            selectTable(val, row){
                this.setSearchBtn(val);
            },
            // 用户全选checkbox时触发该事件
            selectAll(val){
                 val.forEach((item) => {
                     this.rowIds.push(item.id);
                });
                this.setSearchBtn(val);
            },
            setSearchBtn(val){
                let isFlag = true;
                if(val.length > 0){
                    isFlag = false;
                }else{
                    isFlag = true;
                }
                this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
            }
        },
    }
</script>

<style lang="less" scoped>
    .table_container{
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }
    .el-dialog--small{
       width: 600px !important;
    }
    .pagination{
        text-align: left;
        margin-top: 10px;
    }
     
</style>


